<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="personshow">
		<image class="person_picture" v-if="true" :src="picture"></image>
		<image class="person_picture" v-if="false" src="../../../static/register.png"></image>
	</view>
	<view class="main">
		<view class="update">
			<form @submit="formSubmit" @reset="formReset">
				<view class="ele">
					<label for="name">修改昵称</label>
					<input class="input" id="name" v-model="formData.user_name" placeholder="请输入要改变的姓名"/>
				</view>
				<view class="ele">
					<label for="gender">修改性别</label>
					<radio-group id="gender" name="gender" class="input">
					    <view class="group-item">
					       <radio value="0" :checked="formData.gender=='0'" /><text>男</text>
					    </view>
					    <view class="group-item">
					        <radio value="1" :checked="formData.gender=='1'"/><text>女</text>
					    </view>
					</radio-group>
				</view>
				<view class="ele">
					<label for="introduce">修改签名</label>
					<textarea class="textarea" id="introduce" v-model="formData.introduce" placeholder="请书写你的签名吧"/>
				</view>
				
				<view class="ele">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Person } from '../../../public/interface';
import { useCounterStore } from '@/store/user'

	const user = useCounterStore();

	var picture = "http://127.0.0.1:9000/bucket-chat/2fde0c1e020c92d14122e13125e876d.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20241215%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241215T051709Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=26ed691ac6588905510acb250d7e1f6d1ed93164a63d40710676b2db14f035c9"
	
	
	let formData :Person ={
		user_id:0,
		user_name: '',
		email: '',
		gender: 0,
		introduce: ''
	};
	
	const formSubmit = () => {
		console.log(formData.user_name)
		console.log(formData.gender)
		console.log(formData.introduce)
	}
	const formReset = () => {
				
	}
	const onunload=()=>{
		console.log(formData.introduce)
	}
</script>

<style>
.main{

}
.update{
	border-radius: 10%;
	background: white;
	margin: 20rpx;
	height: 1030rpx;
}
.ele{
	margin-left: 10rpx;
	margin-bottom: 50rpx;
	font-family: 'Georgia', serif;;
}
.textarea{
	width: 680rpx;
	height: 300rpx;
	background: aliceblue;
	border-radius: 30rpx;
}
.input{
	width: 680rpx;
	height: 100rpx;
	background: aliceblue;
	border-radius: 30rpx;
}
.personshow{
	display: flex;
	justify-content: center; /* 水平居中 */  
	align-items: center; 
	border-color: black;
	border-width: 5rpx;  
	height: 370rpx;
	width: 100%;
	background: rgb(121.3, 187.1, 255);
	border-bottom-right-radius: 38%;
	border-bottom-left-radius: 38%;
	border-color: white;
	background-size: cover; /* 使背景图像覆盖整个元素 */  
	background-position: center; /* 背景图像居中对齐 */  
	background-repeat: no-repeat;
}
.person_picture{
	width: 300rpx;
	height: 250rpx;
	border-style: solid;
	border-width: 20rpx;
	border-color: aliceblue;
	border-radius: 50%;
}      
</style>
